<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				//获取img1
				var img1 = document.getElementById("img1");
				//创建一个数组
				var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
				//创建索引最初值
				var index = 0;
				
				//定义一个定时器标识
				var timer;
				//为btn01绑定单机响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					
					//每次开始之前都要先结束之前的定时器
					clearInterval(timer);
					
						timer = setInterval(function(){
							index++;
							
							index %= imgArr.length;
							//改变src属性
							img1.src = imgArr[index];
						},1000);
				};
				
				//为btn02绑定单机响应函数
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					clearInterval(timer);
				};
				
				 
			};
		</script>
	</head>
	<body>
		<img id="img1" src="img/1.jpg"/>
		<br />
		<button id="btn01">开始</button>
		<button id="btn02">暂停</button>
	</body>
</html>
